<template>
  <!-- <view></view> -->
  <view class="high-list-wrapper" @click="onReport">
    <!-- <u-search placeholder="请输入" v-model="form.title" @change="searchList" @search="searchList" @custom="searchList"></u-search> -->
    <view class="high-wrapper">
      <view class="high-item-wrapper">
        <view class="high-item">
          <view class="item-left">
            <img class="head-image"
                 :src="`${$store.state.img_url}${baseInfo.avatar}`"
                 alt=""
                 srcset="">
            <image v-if="baseInfo.starFlag =='1'"
                   class="daka-image"
                   src="/static/img/daka.png"
                   mode=""></image>
          </view>
          <view class="item-right">
            <view class="title">
              <view class="text-name">{{baseInfo.nickName}}</view>
              <!-- <img class="sex-image"
                   src="/static/img/sex_femal.png"
                   alt=""
									 v-if="baseInfo.sex =='1'"
                   srcset=""> -->
							<u-icon size="45" class="eye-image" name="woman" v-if="baseInfo.sex =='2'" color="#4D5B80" ></u-icon>		
							<u-icon size="45" class="eye-image" name="man" v-if="baseInfo.sex =='1'" color="#4D5B80" ></u-icon>	 
            </view>
            <view class="text">
              医院：{{baseInfo.hospitalId_dictText}}
            </view>
            <view class="text">
              科室：{{baseInfo.depId_dictText}}
            </view>
            <view class="text">
              职务：{{baseInfo.post_dictText}}
            </view>
            <view class="text">
              职称：{{baseInfo.professionalTitle_dictText}}
            </view>
            <template v-if="baseInfo.id !== $store.state.userInfo.id">
              <view v-if="baseInfo.attentionFlag == '1'" class="attention attention-over">
                已关注
              </view>
              <view v-else class="attention "
                    @click="onFollow">
                关注
              </view>
            

            <img @click="linkTo"
                 class="talk-image"
                 src="/static/img/self-talk.png"
                 alt=""
                 srcset="">
								 </template>
          </view>
        </view>
        <view class="hight-item-bootom">
          <view class="text">粉丝数：{{baseInfo.attentionNum || 0}}</view>
          <view class="text text-right">获赞数：{{baseInfo.thumbsNum || 0}}</view>
        </view>
      </view>
      <view class="self-desc">
        个人介绍：{{baseInfo.intro || "暂无介绍"}}
      </view>
      <view class="pulblish-title">
        所有发布（{{articalList.length}}）
      </view>
      <view class="pulblish-wrapper">
        <view class="pubilsh-item"
              v-for="(item, index) in articalList"
              :key="index">
          <view class="head"
                @click="linkToDetail(item)">
            {{item.title}}
          </view>
          <view class="publish-content"
                @click="linkToDetail(item)">
            <image v-if="item.firstImg" class="artical-image"
                   :src="item.firstImg"
                   mode=""></image>
            <view class="content-desc-right">
              {{item.editContent || ""}}
            </view>
            <!-- <u-parse class="content-desc-right" :content="item.intro"></u-parse> -->
          </view> 
          <view class="post-time-status">
            <view class="time">
              {{item.sendTime}}
            </view>
            <view class="button-wrapper">
              <u-tag style="margin-left:10rpx"
                     v-for="(el, i) in item.subjectType_dictTextList"
                     :text="el"
                     size="mini"
                     bg-color="#fff"
                     color="#21D2FF"
                     border-color="#21D2FF" />
            </view>
          </view>
          <view class="eye-commit-collect">
            <!-- <view class="eye-item">
              <u-icon size="48"
                      class="eye-image"
                      name="eye"
                      color="#4D5B80"></u-icon>
              <view class="text">{{item.readNum || 0}}</view>
            </view> -->
            <view class="zan-item">
              <image @click='clkZan(item, index)'
                     v-if="item.thumbsFlag!='1'"
                     class="zan-image"
                     src="/static/img/ic_zan.png"
                     mode=""></image>
              <u-icon v-else
                      @click='clkZan(item, index)'
                      name="thumb-up-fill"
                      label-size="20"
                      size="40" />
              <view class="text">{{item.thumbsNum || 0}}</view>
            </view>
            <view class="collect-item">
              <image @click="clkFavorites(item)"
                     v-if="item.collectionFlag!='1'"
                     class="collect-image"
                     src="/static/img/ic_shoucan.png"
                     mode=""></image>
              <u-icon v-else
                      @click="cancelFavorites(item)"
                      name="star-fill"
                      label-size="20"
                      size="40" />
              <!-- <view class="text">100</view> -->
            </view>
						<u-icon @click="linkToDetail(item)"
                        name="chat"
                        label-size="20"
                        size="40"
                        :label="item.commentNum" />
            <view class="more-item" @click.stop="clkMore(item, index)">
              <image 
                     class="more-image"
                     src="/static/img/ic_more.png"
                     mode=""></image>
            </view>
            <view v-if='item.showMore'
                  class="dropdown-more-content">
              <image class="dropdown-more-content__item more-item"
                     src="/static/img/ic_shang.png"
											 v-if="item.authorId !== $store.state.userInfo.id"
                     @click="clkReward(item)"></image>
              <image class="dropdown-more-content__item more-item"
											 v-if="item.authorId !== $store.state.userInfo.id"
                     src="/static/img/ic_jubao.png"
                     @click="clkReport(item)"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="dialog-container">
        <u-top-tips ref="uTips"></u-top-tips>

        <u-popup :closeable='true'
                 mode='bottom'
                 ref="popup_favorates">
          <scroll-view scroll-y
                       style="max-height: 500rpx; padding-top: 60rpx;">
            <u-cell-item :titleStyle="{fontWeight: 500}"
                         title="选择收藏夹"
                         @click="addFolder(item)"
                         value="添加" />

            <u-cell-group title-bg-color="rgb(243, 244, 246)">
              <u-cell-item :titleStyle="{fontWeight: 500}"
                           :title="item.clipName"
                           v-for="(item,index) in collectionList"
                           :key="index"
                           @click="chooseFolder(item)" />
            </u-cell-group>

          </scroll-view>
        </u-popup>

        

      </view>
      <u-loadmore v-if="tableData.length>= form.pageSize"
                  class="load-more-wrapper"
                  :status="loadStatus"
                  @loadMore="loadMoreHandle"
                  bgColor="#ffffff"></u-loadmore>
    </view>
		<u-modal ref="editModal"
		 @cancel="cancelEditFolder()"
		 @confirm="confirmEditFolder()"
		 :show-title="false"
		 :showCancelButton="true"
		 v-model="showEditDialog">
				<view class="slot-content">
					<input class="slot-field"
						 label-width=0
						 v-model="folderName"
						 placeholder="请输入收藏夹名称">
				</view>
		</u-modal>
  </view>
</template>

<script>
import apis from "@/apis.js";
export default {
  components: {},
  data() {
    return {
      folderName: "",
      showEditDialog: false,
      currentMajor: 0,
      loadStatus: "loadmore",
      form: {
        pageNo: 1,
        pageSize: 20,
        title: "",
      },
      collectId: "",
      folderName: "",
      showEditDialog: false,
      authorId: "",
      tableData: [],
      baseInfo: {},
      articalList: [],
      collectionList: [],
    };
  },
  methods: {
    
    onReport() {
      this.articalList.forEach((item) => {
        item.showMore = false;
      });
    },
    setFavorates(item) {
      this.$http
        .post(apis.collection_context, {
          artId: this.collectId,
          clipId: item.id,
          clipName: item.clipName,
          contextId: item.clipName,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.articalList.forEach((el, i) => {
              if (el.id === this.collectId) {
                el.collectionFlag = "1";
                this.$refs.uTips.show({
                  title: "收藏成功",
                  type: "success",
                  duration: "2300",
                });
              }
            });
            this.$forceUpdate();
          }
        });
    },
    chooseFolder(item) {
      console.log("chooseFolder");
      this.setFavorates(item);
      this.$refs.popup_favorates.close();
    },
    clkReport(item) {
			let userInfo = this.$store.state.userInfo
			if (userInfo.authenticationFlag === '2' || userInfo.starFlag === '1') {
				this.$u.route({
				  url: "pages/post/report/report",
				  params: {
				    id: item.id,
				  },
				});
			} else {
				uni.showModal({
				  title: '提示',
				  content: '认证后才能进行该操作，是否前往认证？',
				  success(res) {
				    if (res.confirm) {
				      uni.navigateTo({
				      	url: '/pages/authentication/remind?auditType=1'
				      })
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  }
				})
			}
    },
    clkReward(item) {
      this.$u.route({
        url: "pages/post/reward/reward",
        params: {
          id: item.id,
        },
      });
    },
    clkMore(item) {
      // this.reportShow = true
      item.showMore = !item.showMore;
    },
		addFolder(item) {
		  this.showEditDialog = true;
		},
    onMask(item) {
      console.log("item", item);
      this.reportShow = false;
      item.showMore = false;
      this.$forceUpdate();
    },
    getCollectList() {
      this.$http.get(apis.collectionList).then((res) => {
        if (res.data.code === 200) {
          this.collectionList = res.data.result;
        }
      });
    },

    cancelFavorites(item) {
      this.$http
        .post(apis.collection_delete, {
          // "artId": this.collectId,
          artId: item.id,
          // "clipName": item.clipName,
          // "contextId": item.clipName
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.articalList.forEach((el, i) => {
              if (el.id === item.id) {
                el.collectionFlag = "0";
                this.$refs.uTips.show({
                  title: "取消成功",
                  type: "success",
                  duration: "2300",
                });
              }
            });
            this.$forceUpdate();
          }
        });
    },
    cancelEditFolder() {
      console.log("cancel");
      // this.folderName = ''
    },
    confirmEditFolder(index) {
			this.showEditDialog = true
				if (!this.folderName) {
					uni.showToast({
						title: '文件夹名称不能为空',
						icon: 'none'
					})
					return
				}
      this.$http
        .post(apis.collectionAdd, {
          artId: this.artId,
          clipId: 0,
          clipName: this.folderName,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.showEditDialog = false
            this.folderName = ""
            this.$refs.uTips.show({
              title: " 创建成功",
              type: "success",
              duration: "2300",
            });
            this.getCollectList();
          }
        });
    },
    clkFavorites(item) {
      this.collectId = item.id;
      this.$refs.popup_favorates.open();
    },
    clkZan(item, index) {
      let url = item.thumbsFlag === "1" ? apis.thumbsCancel : apis.thumbsAgree;
      this.$http.post(url, { id: item.id }).then((res) => {
        if (res.data.code === 200) {
          this.articalList.forEach((el, i) => {
            if (el.id === item.id && item.thumbsFlag === "1") {
              el.thumbsFlag = "0";
              el.thumbsNum = item.thumbsNum - 1;
              this.$refs.uTips.show({
                title: "取消成功",
                type: "success",
                duration: "2300",
              });
            } else if (el.id === item.id && item.thumbsFlag === "0") {
              el.thumbsFlag = "1";
              el.thumbsNum = item.thumbsNum + 1;
              this.$refs.uTips.show({
                title: "点赞成功",
                type: "success",
                duration: "2300",
              });
            }
          });
        }
      });
    },
    linkToDetail(item) {
      this.$u.route({
        url: "pages/tabbar/tabbar-1/post-detail?type=1",
        params: {
          id: item.id,
        },
      });
    },
    linkTo() {
			let userInfo = this.$store.state.userInfo
			if (userInfo.authenticationFlag === '2' || userInfo.starFlag === '1') {
				this.$u.route("pages/tabbar/tabbar-1/direct-message", {
				  id: this.otherAuthorId,
				  name: this.baseInfo.nickName,
					avatar: this.baseInfo.avatar
				});
			} else {
        this.articalList.forEach(item => {
            item.showMore = false
          })
				uni.showModal({
				  title: '提示',
				  content: '认证后才能进行该操作，是否前往认证？',
				  success(res) {
				    if (res.confirm) {
				      uni.navigateTo({
				      	url: '/pages/authentication/remind?auditType=1'
				      })
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  }
				})
			}
      
    },
    getSelfAuthorId() {
      this.$http.get(apis.userAuthor_detail, {}).then((res) => {
        if (res.data.code === 200) {
          this.authorId = res.data.result.id;
        }
      });
    },
    // 关注
    onFollow() {
      this.$http
        .post(apis.attention, { authorId: this.baseInfo.id })
        .then((res) => {
          if (res.data.code === 200) {
            this.$refs.uTips.show({
              title: "关注成功",
              type: "success",
              duration: "2300",
            });
            this.getList();
          }
        });
    },
    searchList() {
      this.pageNo = 1;
      this.tableData = [];
      this.getList();
    },
    // 无限加载 利用公共方法判断
    onReachBottom() {
      this.pageNo = this.pageNo + 1;
      this.getList();
    },
    loadMoreHandle() {
      this.pageNo = this.pageNo + 1;
      this.getList();
    },
    getList() {
      this.$http
        .get(`${apis.user_detail}/${this.otherAuthorId}`)
        .then((res) => {
          if (res.data.code === 200) {
            this.baseInfo = {
              ...res.data.result,
            };
            console.log("12", this.baseInfo);
          }
        });
    },
    getArticalList() {
      this.$http
        .get(apis.getArticleListByUserId, {
          ...this.form,
          userId: this.otherAuthorId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            // this.articalList = res.data.result.records
            let data = this.articalList
              .concat(res.data.result.records)
              .map((item) => {
                return {
                  ...item,
									showMore: false,
                  subjectType_dictTextList: item.subjectType_dictText
                    ? item.subjectType_dictText.split(",")
                    : [],
                };
              });
            this.articalList = data;
            if (res.data.result.total === this.articalList.length) {
              this.loadStatus = "nomore";
              this.isDot = true;
            } else {
              this.loadStatus = "loadmore";
              this.isDot = false;
            }
          }
        });
    },
  },
  onload(params) {
    // this.getList()
  },
  onShow(params) {
    this.form.pageNo = 1;
    this.articalList = [];
    // this.getSelfAuthorId()
    console.log("onload", this.$route);
    this.otherAuthorId = this.$route.query.id;
    this.getList();
    this.getArticalList();
    this.getCollectList();
    uni.setNavigationBarTitle({
      title: "个人主页",
    });
  },
};
</script>

<style scoped lang="scss">
// $title-font: 36rpx; //主要用在顶部标题、医生名称、tab大文字
// $artical-title-font: 28rpx;//主要用在文章标题、关注
// $artical-text-font: 26rpx;//主要用正文文字 、tab小文字
// $artical-time-font: 24rpx;//主要用在时间文字，搜索文字、专业标签
@import "uview-ui/index.scss";
.eye-commit-collect {
	position: relative;
}
.dropdown-more-content {
  //display: flex;
  //flex-flow: row nowrap;
  //justify-content: space-around;
  //background: #EFF1F7;
  //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
  //opacity: 1;
  //border-radius: 4px;

  // background-color: yellow;
  // width: 225rpx;
  position: absolute;
  right: 0;
  top: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;

  background: #eff1f7;
  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 4rpx;
  z-index: 10075;

  &__item {
    width: 31rpx;
    height: 31rpx;
    padding: 15rpx 19rpx;
  }
}
.high-list-wrapper {
  padding: 24rpx 30rpx;
  .pubilsh-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
  .high-wrapper {
    margin-top: 24rpx;
    .high-item-wrapper {
      background: #a4cde8;
      opacity: 1;
      border-radius: 8rpx;
    }
    .high-item {
      display: flex;
      align-items: flex-start;
      padding: 60rpx 50rpx;
      padding-bottom: 0;
      position: relative;
      border-bottom: 2rpx solid #ffffff;
      .attention {
        width: 120rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: #3fa7ff;
        box-shadow: -4rpx -4rpx 12rpx #ffffff;
        opacity: 1;
        border-radius: 8rpx;
        position: absolute;
        top: 48rpx;
        right: 78rpx;
        font-size: 24rpx;
        font-family: SimHei;
        font-weight: 400;
        color: #fff;
        opacity: 1;
        &.attention-over {
          background: #ffffff;
          // color: #E9EBF4;
          color: #4d5b80;
        }
      }
      .talk-image {
        position: absolute;
        top: 48rpx;
        right: 14rpx;
        width: 40rpx;
        height: 40rpx;
      }
      .item-left {
        margin-right: 28rpx;
        position: relative;
        .daka-image {
				position: absolute;
				width: 94rpx;
				height: 40rpx;
				bottom: 0;
				right: 10px;
        }
      }
      .head-image {
        width: 120rpx;
        height: 120rpx;
        background: #4d5b80;
        border-radius: 50%;
        opacity: 1;
      }
      .item-right {
        display: flex;
        flex-direction: column;
        .title {
          margin-bottom: 16rpx;
          display: flex;
          align-items: center;
          .text-name {
            font-size: $title-font;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #4d5b80;
            max-width: 113px;
          }
          .sex-image {
            width: 40rpx;
            height: 40rpx;
            margin-left: 28rpx;
          }
        }
        .text {
          margin-bottom: 16rpx;
          font-size: 24rpx;
          font-family: SimHei;
          font-weight: 400;
          color: #4d5b80;
          opacity: 1;
        }
      }
    }
    .hight-item-bootom {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60rpx;
      .text {
        font-size: 24rpx;
        font-family: SimHei;
        font-weight: 400;
        color: #4d5b80;
        opacity: 1;
      }
      .text-right {
        margin-left: 128rpx;
      }
    }
    .self-desc {
      margin-top: 16rpx;
      font-size: 24rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 48rpx;
      color: #4d5b80;
      opacity: 1;
      border-bottom: 2rpx solid #949494;
    }
    .pulblish-title {
      margin-top: 16rpx;
      margin-bottom: 32rpx;
      font-size: 40rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #4d5b80;
      opacity: 1;
    }
  }
  .pulblish-wrapper {
    .pubilsh-item {
      .head {
        font-size: $artical-title-font;
        font-family: SimHei;
        font-weight: 400;
        color: $text-color;
        margin-bottom: 26rpx;
      }
      .publish-content {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16rpx;
        .artical-image {
          width: 240rpx;
          height: 180rpx;
          background: rgba(0, 0, 0, 1);
          opacity: 0.8;
          border-radius: 8rpx;
          margin-right: 16rpx;
          flex-shrink: 0;
        }
        .content-desc-right {
          font-size: $artical-text-font;
          font-family: SimHei;
          font-weight: 400;
          color: $econdary-word-color;
					height: 93px;
					opacity: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 5;
					-webkit-box-orient: vertical;
					word-break: break-all;
        }
      }
      .post-time-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
          font-size: 24rpx;
          font-family: SimHei;
          font-weight: 400;
          color: $econdary-word-color;
          opacity: 1;
        }
      }
      .eye-commit-collect {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 22rpx;
        .eye-item,
        .zan-item,
        .collect-item,
        .more-item {
          display: flex;
          align-items: center;
          flex: 1;
        }
        .more-item {
          justify-content: flex-end;
        }
        .eye-image {
          font-size: 48rpx;
        }
        .zan-image {
          width: 41rpx;
          height: 40rpx;
        }
        .collect-image {
          width: 40rpx;
          height: 40rpx;
        }
        .more-image {
          width: 40rpx;
          height: 8rpx;
        }
        .text {
          font-size: 24rpx;
          font-family: SimHei;
          font-weight: 400;
          color: #4d5b80;
          margin-left: 8rpx;
        }
      }
    }
  }
}
.slot-content {
  display: flex;
  flex-flow: column nowrap;
  font-size: 31rpx;
  color: $u-content-color;
  padding: 80rpx 40rpx;

  .slot-field {
    width: auto;
    text-align: center;
  }
}
.more-item {
  margin: 0 10rpx;
  // &:last-child {
  //   margin-right: 0;
  // }
}
</style>
